<template>
	<view class="content">
		<view
			style="position: fixed;top:20upx;z-index: 99;right:0upx;width:200upx;height:50upx;line-height:50upx;text-align: center;background: #rgb(214 214 214 / 75%);border-radius: 8upx;"
			@click="gotourl">提货明细</view>
		<view class="topBox">

			<view>数据统计</view>
			<view class="moneyTxt">总数量：{{blance.all_number}}</view>
			<view class="moneyTxt">可提{{blance.kt_number}}箱（已提：{{blance.yt_number}}箱）</view>
			<view style="width: 100%;overflow: hidden;">
				<button @click="seePoup=!seePoup">提货</button>

			</view>


		</view>

		<view class="top-line item-flex">
			<!-- <view class="changeMonth item-flex">
				<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker> 
				<!-- <image mode="widthFix" src="../../static/toBottom.png"></image> 
			</view> -->

			<!-- <view class="sumTxt item-flex flex-around">
				<view>收入:{{blance.type1}}元</view>
				<view>支出:{{blance.type2}}元</view>
			</view> -->

		</view>
		<view class="list">
			<view class="line list-title item-flex">

				<view>数量</view>
				<view>日期</view>
				<view>备注</view>
			</view>
			<view class="line item-flex" v-for="(item,index) in blance.log">



				<view style="color: red;">
					{{item.number}}
				</view>

				<view style="color: #999;font-size: 28rpx;">{{item.time}}</view>
				<view style="color: #999;font-size: 28rpx;">{{item.note}}</view>


			</view>
		</view>

		<view class="marke" v-show="seePoup">
			<view class="withdraw">
				<icon @click="seePoup=false" class="cancel" type="clear" size="24" color="#ccc"></icon>
				<view class="markeTitle">提货(数量：1)</view>
				<view class="row b-b">
					<text class="tit" style="color: red;">联系人：</text>
					<input class="input" type="text" v-model="name" placeholder="收货人姓名"
						placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit" style="color: red;">手机号：</text>
					<input class="input" type="number" v-model="phone" placeholder="收货人手机号码"
						placeholder-class="placeholder" />
				</view>
				<view class="row b-b">

					<view class="item tit" style="color: red;">地址：</view>
					<view class="result" v-if="city" @tap="regionVisible=true">{{city}}</view>
					<view class="result" v-else @tap="regionVisible=true">&nbsp;点击选择</view>

					<w-picker :visible.sync="regionVisible" mode="region" :value="defaultRegion" default-type="value"
						:hide-area="false" @confirm="onConfirm($event,'region')" @cancel="onCancel" ref="region">
					</w-picker>
					<!-- <text q class="input">
						{{addressData.city}}
					</text> -->
					<!-- <text class="yticon icon-shouhuodizhi"></text> -->
				</view>
				<view class="row b-b">
					<text class="tit" style="color: red;">详细地址：</text>
					<input class="input" type="text" v-model="address" placeholder="楼号、门牌"
						placeholder-class="placeholder" />
				</view>
				<button @click="tijiao">立即提货</button>

			</view>
		</view>

		<!-- <view class="marke" v-show="seePoups">
			<view class="withdraw">
				<icon @click="seePoups=false" class="cancel" type="clear" size="24" color="#ccc"  ></icon>
				<view class="markeTitle">试喝</view>
				<input class="moneyBox" type="digit" cursor-spacing="50px" placeholder="请输入店铺ID"  :value="uid" placeholder-class="tips"@blur="uidsss"/>
				<input class="moneyBox" type="number" cursor-spacing="50px" placeholder="请输入试喝数量"  :value="number" placeholder-class="tips"@blur="changenumber"/>
				<!-- <view class="btnGroup item-flex flex-around">
					<button>取消</button>
				</view> -->
		<!-- <button @click="tijiao2">立即试喝</button>
				
			</view>
		</view> -->
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				regionVisible: false,
				startDate: "2021-09",
				endDate: "2021-10",
				date: "2021-10",
				seePoup: false,
				blance: [],
				userinfo: '',
				number: '',
				seePoups: false,
				uid: '',
				city: '',
				address: '',
				name: '',
				phone: ''
			}
		},
		onLoad() {

			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					console.log(res, "00000");
					this.userinfo = res.data;
					// uni.setStorage({
					// 	key: 'userinfo',
					// 	data: this.userinfo
					// });
					//console.log(this.userinfo, '用户信息')
					if (this.userinfo == '') {
						//	console.log(res, "00000");
						// uni.navigateTo({
						// 	url: `/pages/login/login`
						// })
					}
					//this.getUserLists()
				},
				fail: (res) => {
					//console.log(res,'sssss')
					// uni.navigateTo({
					// 	url: `/pages/public/login`
					// })
				}
			});
			this.getuserblance()

		},
		methods: {
			onConfirm(res) {
				this.city = res.result;
				//this.regionVisible = false
				//console.log(res.result)
			},
			gotourl() {
				//console.log('1111')
				uni.navigateTo({
					url: '/pages/user/beer_log'
				})
			},
			changenumber(e) {

				this.number = e.detail.value
				//console.log(e)

			},
			uidsss(e) {
				this.uid = e.detail.value
			},
			async tijiao() {
				if (!this.name) {
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.phone)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if (!this.city) {
					this.$api.msg('请在选择所在位置');
					return;
				}
				if (!this.address) {
					this.$api.msg('请填写详细信息');
					return;
				}
				const res = await this.$myRequest({
					url: 'index.php/api/user/beer_tihuo',
					method: "POST",
					data: {
						"member_id": this.userinfo.member_id,
						'address': this.city + this.address,
						'phone': this.phone,
						'name': this.name

					},


				})
				if (res.status == 200) {
					uni.showToast({
						title: res.data,
						icon: 'none'
					})
				}
			},
			getuserblance() {
				//console.log(this.userinfo,'aaaaaaaaaa')
				uni.request({
					url: "http://ptapi.njkw668.com/index.php/api/user/beer_log",
					method: "POST",
					data: {
						"member_id": this.userinfo.member_id
					},
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded;application/json;charset=UTF-8',

					},
					success: (res) => {
						//console.log(res)
						if (res.data.status == 201) {
							return uni.showToast({
								title: res.data.data,
								icon: 'none'
							})
						}
						this.blance = res.data.data
					},


				})
				console.log(this.blance, 'aaaaaaaaaa')
				// 		const res=await    this.$myRequest({
				// 		url:'',
				// 		method:"POST",
				// 		data:{

				// 		},


				// })

			}

		},
		onShow() {
			const res = uni.getStorage({
				key: 'userInfo',
				success: (res) => {

					if (res.data) {

						this.userinfo = res.data
						if (this.userinfo.member_id) {
							//this.getuseragain();
							// this. url="http://pth5.njkw668.com/#/pages/user/user?&pid="+this.userinfo.member_id
						}
					} else {
						window.location.href =
							'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9a8339b68f86cd01&redirect_uri=http%3A%2F%2Fpth5.njkw668.com%2F%23%2Fpages%2Fpublic%2Flogin&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
					}
				},
				fail: (res) => {
					window.location.href =
						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9a8339b68f86cd01&redirect_uri=http%3A%2F%2Fpth5.njkw668.com%2F%23%2Fpages%2Fpublic%2Flogin&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
				}
			});
		},



	}
</script>

<style>
	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 150upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.item-flex {
		display: flex;
		align-items: center;
	}

	.flex-center {
		justify-content: center;
	}

	.flex-around {
		justify-content: space-around;
	}

	page {
		background: #f5f5f5;
	}

	.topBox {

		font-size: 32rpx;
		color: black;
		height: 320rpx;
		background: url(../../static/user-bg.jpg);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.topBox button {
		font-size: 32rpx;
		width: 30%;
		background: red;
		color: black;

	}

	.moneyTxt {
		font-size: 40rpx;
		color: red;
		font-weight: bold;
	}

	.top-line {
		width: 94%;
		flex: 1;
		padding: 10rpx 3%;
		height: 72rpx;
		line-height: 72rpx;
	}

	.list {
		width: 96%;
		margin: 0 auto;
		background: #fff;
	}

	.list .line:last-child {
		border: none
	}

	.line {
		width: 100%;
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		border-bottom: 2rpx solid #ebebeb;
	}

	.line view,
	.sumTxt view {
		width: 100%;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.line image {
		width: 48rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.changeMonth {
		width: 30%;
		margin-right: 10%;
		position: relative;
	}

	.changeMonth picker {
		width: 100%;
	}

	.changeMonth image {
		width: 32rpx;
		position: absolute;
		right: 0;
		top: 20rpx;
	}

	.changeIcon {
		width: 32rpx;
	}

	.sumTxt {
		width: 60%;
		font-size: 28rpx;
		color: #999;
	}

	.marke {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.withdraw {
		width: 80%;
		background: #fff;
		border-radius: 20rpx;
		position: relative;
	}

	.markeTitle {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333;
		text-align: center;
		background: #f5f5f5;
		border-radius: 20rpx 20rpx 0 0;
	}

	.moneyBox {
		width: 90%;


		margin: 20rpx 5%;
		text-align: center;
		font-size: 42rpx;
		font-weight: bold;
		color: red;
	}

	.tips {
		font-size: 30rpx;
		color: #bebebe;
		text-align: center;
		font-weight: normal;
	}

	.withdraw button {
		width: 90%;
		margin: 20rpx 5%;
		margin-top: 40rpx;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		border: none;
		background: #007AFF;
		color: #fff;
	}

	.withdraw button::after {
		border: none;
	}

	.cancel {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		background: #fff;
		border-radius: 50%;
		z-index: 999;

	}
</style>
